<template>
  <div id="loginForm" class="loginForm">
    <h3 style="text-align: center">
      <slot name="formTitle">Login</slot>
    </h3>
    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
      <el-form-item label="Name" style="width: 80%">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password" style="width: 80%">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <slot id="submit"
          ><el-button @click="clickLogin">Login</el-button>
        </slot>
        <el-button @click="doClose">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from "@/api/login.js";

export default {
  name: "User",
  data() {
    return {
      form: {
        username: "admin",
        password: "123",
      },
    };
  },
  computed: {},
  methods: {
    clickLogin() {
      login(this.form).then((res) => {
        if (res.code !== 200) {
          return this.$message.error("login failed:" + res.msg);
        }
        this.$message.success("login success");
        //save token to the seesionStorage
        this.$store.curUser = this.form.username;
        console.log("this.$store.curUser :>> ", this.$store.curUser);
        window.sessionStorage.setItem("token", res.data);
        this.$router.push("/dashboard");
        // console.log("window.sessionStorage :>> ", window.sessionStorage);
      });
    },
    doClose() {
      console.log("close");
    },
  },
};
</script>
